<template>
    <main-layout title="项目管理" :showNew="true" @newEvent="toNewPage">
        <ul @scroll="scrollEvt" class="page-list-box">
            <li class="item" v-for="item in list" :key="item.id">
                <span class="span t">{{item.name}}</span>
                <span class="span">负责人：{{item.liableName}}</span>
                <!-- 在vue中可以定义一个展示过滤器，这个可以实现展示时对展示内容进行定义，在标签上是用过滤器需要添加一个 | 符号，在符号后边直接写过滤器方法名字 -->
                <!-- Failed to resolve filter: df -->
                <span class="span">签订日期：{{item.signTime | df('MM月dd日 hh时mm分')}}</span>
                <!-- <span>签订日期：{{item.signTime | df}}</span>
                <span v-df:blue.18="item.signTime"></span> -->
                <span class="span">地址：{{item.county}}</span>
                <div class="opt">
                    <i @click="toNewPage(item)"></i>
                    <i class="d"></i>
                </div>
            </li>
            <li>
                <span v-if="loading" class="loading">加载中...</span>
                <!-- 加载完成以后，如果有更多数据，则显示第一个，否则显示第二个 -->
                <span v-if="!loading && hasMore" class="loading">上滑加载更多</span>
                <span v-if="!hasMore && !loading" class="loading">不要滑了，没有了</span>
            </li>
        </ul>
    </main-layout>
</template>

<script>
    import { projectListApi } from '../../apis/projectApi'

    export default {
        data() {
            return {
                list: [],
                page: 1,
                size: 5,
                loading: true,
                // 定义为是否后端还有数据的标识
                hasMore: true
            }
        },

        computed: {
            userRight() {
                return this.$store.getters['common/userRights']
            }
        },

        created() {
            this.getList()
        },

        // 自定义组件指令 -- 把dom节点返回用户，用户自己去渲染dom内容，或则是去控制dom
        directives: {
            // df(el, bindData, newNode, oldNode) {
            //     el.innerText = `签订时间：${bindData.value}`

            //     el.style.color = bindData.arg

            //     if (bindData.modifiers['18']) el.style.fontSize = '18px'
            // }

            // df: {
            //     // 有指令生命周期
            //     bind(el, bindData) {
            //         console.log(arguments)
            //         el.innerText = `签订时间：${bindData.value}`

            //         el.style.color = bindData.arg

            //         if (bindData.modifiers['18']) el.style.fontSize = '18px'
            //     },
            //     componentUpdated(el, bindData) {
            //         console.log(arguments)
            //         el.innerText = `签订时间：${bindData.value}`

            //         el.style.color = bindData.arg

            //         if (bindData.modifiers['18']) el.style.fontSize = '18px'
            //     },
            //     unbind() {
            //         console.log(arguments)
            //     }
            // }
        },

        // 定义过滤器 -- filters
        filters: {
            // df: function(value) {
            // df: (value) => {
            // 在过滤器中不能获取当前组件this对象，这个方法的第一个参数，始终为：使用过滤器的地方的值，从第二个参数开始为过滤器传递数据
            // df(value, type = 'yyyy年MM月dd日 hh时mm分ss秒') {

            //     let _d = new Date(value),
            //         yyyy = _d.getFullYear(),
            //         MM = _d.getMonth() + 1,
            //         // Date.getDate(): number => 03 => 3
            //         dd = _d.getDate(),
            //         hh = _d.getHours(),
            //         mm = _d.getMinutes(),
            //         ss = _d.getSeconds()

            //     MM = MM > 9 ? MM : `0${MM}`
            //     dd = dd > 9 ? dd : `0${dd}`
            //     hh = hh > 9 ? hh : `0${hh}`
            //     mm = mm > 9 ? mm : `0${mm}`
            //     ss = ss > 9 ? ss : `0${ss}`

            //     // `${yyyy}-${MM}-${dd} ${hh}:${mm}:${ss}` => 2021-09-09 09:09:09
            //     // `${yyyy}年${MM}月${dd}日` => 2021年09月09日 => yyyy年MM月dd
            //     // return `${yyyy}-${MM}-${dd} ${hh}:${mm}:${ss}`
            //     // 'yyyy年MM月dd日 hh时mm分ss秒'

            //     let obj = {yyyy, MM, dd, hh, mm, ss}
            //     return type.replace(/(yyyy)|(ss)|(dd)|(hh)|(mm)|(MM)/g, function(str) {
            //         return obj[str] // obj['yyyy'] => obj.yyyy
            //     })
            // }
        },

        methods: {
            // 新增事件，去判断用户是否有权限
            toNewPage(row) {
                // 判断到底是新增事件还是编辑事件
                let isEdit = !!row

                let right = this.userRight.find(it => it.id === 'PROJECT-01-01')
                
                if (!!right) {
                    if (!isEdit && right.role.includes('C')) {
                        this.$router.push({name: 'editProject', query: {from: 'list'}})
                    } else {
                        if (!!isEdit) {
                            if (right.role.includes('C')) {
                                // query参数，id表示当前编辑的项目编码，from 表示从列表页面过去，需要编辑页面返回到列表
                                this.$router.push({name: 'editProject', query: {id: row.id, from: 'list'}})
                            } else {
                                this.$toast.fail('您没有这个权限')
                            }
                        } else {
                            this.$toast.fail('您没有这个权限')
                        }
                    }
                } else {
                    this.$toast.fail('您没有这个权限')
                }
            },
            async getList() {
                let result = await projectListApi({name: '', page: this.page, size: this.size})
                if (result.code === 200) {
                    this.list = this.list.concat(result.data.rows)
                    // 计算hasMore的值：当前页树 * 每页展示的条数 要小于 后端总条数 才有更多数据，还没有从后端获取回来
                    this.hasMore = this.page * this.size < result.data.total
                }

                setTimeout(() => {
                    this.loading = false
                })
            },
            dateFormat(val) {
                let _d = new Date(val),
                    yyyy = _d.getFullYear(),
                    MM = _d.getMonth() + 1,
                    // Date.getDate(): number => 03 => 3
                    dd = _d.getDate(),
                    hh = _d.getHours(),
                    mm = _d.getMinutes(),
                    ss = _d.getSeconds()

                MM = MM > 9 ? MM : `0${MM}`
                dd = dd > 9 ? dd : `0${dd}`
                hh = hh > 9 ? hh : `0${hh}`
                mm = mm > 9 ? mm : `0${mm}`
                ss = ss > 9 ? ss : `0${ss}`

                // 2021-09-09 09:09:09

                return `${yyyy}-${MM}-${dd} ${hh}:${mm}:${ss}`
            },
            scrollEvt(evt) {
                // 需要计算，当前页面滚动到哪个位置
                console.log(evt.target.offsetHeight, evt.target.scrollHeight, evt.target.scrollTop)
                // 是否已经滚动到底部
                let isBottom = (evt.target.scrollHeight - (evt.target.offsetHeight + evt.target.scrollTop) - 20) < 0

                // 实现一个节流，当滚动到底部，并且数据没有处于加载状态下，才能获取去请求加载下一页数据
                // 在没有更多数据的情况下，任何时候都不能发起请求
                if (isBottom && !this.loading && this.hasMore) {
                    // 把加载中变量给重置为正在加载
                    this.loading = true

                    // 加载下一页数据
                    this.page += 1

                    // 调用数据请求方法
                    this.getList()
                }
            }
        }
    }
</script>